<template>
  <header class="r-content" style="">
    <div class="r-content" style="display: inline-block;float: left;">
      <el-button plain icon="el-icon-menu" size="mini" @click="handleMenu"></el-button>
      <div class="breadcrumb">
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ path: '/' }">
            <font style="color: #ffffff;font-weight: 200%;">首页</font>
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="current.path" v-if="current">
            <font style="color: #ffffff;font-weight: 200%;">{{current.label}}</font>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="r-content" style="display: inline-block;float: right;">
      <el-dropdown trigger="click" size="mini">
        <span class="el-dropdown-link">
          <img class="user" :src="userImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        userImg: require('../assets/image/2.jpg'),
      };
    },
    methods: {
      handleMenu() {
        this.$store.commit("collapseMenu");
      },
    },
    computed: {
      ...mapState({
        current: state => state.tab.currenMenu,
      }),
    },
  };
</script>

<style lang="scss" scoped>
  header {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .l-content {
    display: flex;
    align-items: center;

    .el-button {
      display: inline-block;
      margin-right: 20px;
    }
  }

  .r-content {
    display: block;

    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-top: 10px;
    }

    .breadcrumb {
      color: #FFFFFF;
      display: inline-block;
      margin-left: 20px;
      margin-top: 22px;
    }
  }
</style>
